<template>
  <div id="jobCommentList">
    <h1 class="con-right-title">
      <i class="fa fa-reply" @click="cancel"></i>
      互动消息/评论列表
    </h1>
    <el-card class="box-card">
      <div class="table-conBtn">
        <freshCom @searchList="getRecommendList"></freshCom>
      </div>
      <!-- 推荐评论table -->
      <el-table
        :data="recommendTableData"
        v-loading="loading"
        stripe
        style="width: 100%"
        max-height="490"
        ref="table"
      >
        <el-table-column type="index" width="60" align="center" label="序号">
          <template slot-scope="scope">
            {{
              scope.$index
                | filterPage(
                  recommendSearchParams.pageNum,
                  recommendSearchParams.pageSize
                )
            }}
          </template>
        </el-table-column>
        <el-table-column label="评论人头像" width="120">
          <template slot-scope="scope">
            <div class="avatar-box" v-if="scope.row.user">
              <el-image fit="contain" :src="scope.row.user.avatar"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="评论人昵称"
          prop="user.nickName"
          width="120"
        ></el-table-column>
        <el-table-column
          label="大鹏号"
          prop="user.dpAccount"
          width="100"
        ></el-table-column>
        <el-table-column label="评论内容" prop="content" width="260">
          <template slot-scope="scope">
            <span v-html="filterContent(scope.row)"></span>
          </template>
        </el-table-column>
        <el-table-column label="视图预览" width="160" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.images && scope.row.images.length > 0">
              <listImgShow :imgInfo="scope.row.images"></listImgShow>
            </template>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          label="点赞数"
          prop="likeCount"
          width="160"
        ></el-table-column>
        <el-table-column label="是否置顶" width="160">
          <template slot-scope="scope">
            <span v-if="scope.row.isRecommend">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column
          label="评论时间"
          prop="createdDate"
          width="160"
        ></el-table-column>
        <el-table-column
          label="回复总条数"
          prop="replyCount"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="toRecommend(scope.row.id)"
              v-if="!scope.row.isRecommend"
              >置顶</el-button
            >
            <el-button type="text" v-else @click="cancelRecommend(scope.row.id)"
              >取消置顶</el-button
            >
            <el-button
              type="text"
              @click="showAddPraise(scope.row.id, scope.row.likeCount)"
              >加赞</el-button
            >
            <el-button type="text" @click="addComment(scope.row.id)"
              >添加回复</el-button
            >
            <el-button
              type="text"
              v-if="scope.row.replyCount > 0"
              @click="
                changeView(
                  'wh:interactManagement:interactManage:commentBackList',
                  scope.row.id
                )
              "
              >回复列表</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--分页-全局组件-->
      <div class="recommend-pagination">
        <pageCom
          :searchParams="recommendSearchParams"
          :total="recommendTotal"
          @searchList="getRecommendList"
        ></pageCom>
      </div>
    </el-card>
    <el-card class="box-card">
      <div class="table-conBtn">
        <freshCom @searchList="searchList"></freshCom>
      </div>
      <!--常规评论table-->
      <el-table
        :data="tableData"
        v-loading="loading"
        stripe
        style="width: 100%"
      >
        <el-table-column type="index" width="60" align="center" label="序号">
          <template slot-scope="scope">
            {{
              scope.$index
                | filterPage(searchParams.pageNum, searchParams.pageSize)
            }}
          </template>
        </el-table-column>
        <el-table-column label="评论人头像" width="120">
          <template slot-scope="scope">
            <div class="avatar-box" v-if="scope.row.user">
              <el-image fit="contain" :src="scope.row.user.avatar"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="评论人昵称"
          prop="user.nickName"
          width="120"
        ></el-table-column>
        <el-table-column
          label="大鹏号"
          prop="user.dpAccount"
          width="100"
        ></el-table-column>
        <el-table-column label="评论内容" prop="content" width="260">
          <template slot-scope="scope">
            <span v-html="filterContent(scope.row)"></span>
          </template>
        </el-table-column>
        <el-table-column label="视图预览" width="160" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.images && scope.row.images.length > 0">
              <listImgShow :imgInfo="scope.row.images"></listImgShow>
            </template>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          label="点赞数"
          prop="likeCount"
          width="160"
        ></el-table-column>
        <el-table-column label="是否置顶" width="160">
          <template slot-scope="scope">
            <span v-if="scope.row.isRecommend">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column
          label="评论时间"
          prop="createdDate"
          width="160"
        ></el-table-column>
        <el-table-column
          label="回复总条数"
          prop="replyCount"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="toRecommend(scope.row.id)"
              v-if="!scope.row.isRecommend"
              >置顶</el-button
            >
            <el-button type="text" v-else @click="cancelRecommend(scope.row.id)"
              >取消置顶</el-button
            >
            <el-button
              type="text"
              @click="showAddPraise(scope.row.id, scope.row.likeCount)"
              >加赞</el-button
            >
            <el-button type="text" @click="addComment(scope.row.id)"
              >添加回复</el-button
            >
            <el-button
              type="text"
              v-if="scope.row.replyCount > 0"
              @click="
                changeView(
                  'wh:interactManagement:interactManage:commentBackList',
                  scope.row.id
                )
              "
              >回复列表</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--分页-全局组件-->
      <pageCom
        :searchParams="searchParams"
        :total="total"
        @searchList="searchList"
      ></pageCom>
    </el-card>
    <dialogReply
      :dialogData="addCommentData"
      v-if="addCommentData.isShow"
      @refresh="refresh"
    ></dialogReply>
    <dialog-add-praise
      :addPraiseData="addPraiseData"
      @refresh="refresh"
      v-if="addPraiseData.isShow"
    ></dialog-add-praise>
  </div>
</template>

<script>
import dialogReply from '@common/dialogReply'
import dialogAddPraise from '@component/common/dialogAddPraise'
import { filterCon } from '@utils/pubFunction'
import {
  getBase,
  getRecommend,
  recommend,
  cRecommend
} from '@/api/common/commentsAPI'
export default {
  name: 'messageCommentList-test',
  msg: '互动消息管理-评论列表',
  data() {
    return {
      loading: true,
      total: 0,
      recommendTotal: 0,
      tableData: [], // table内容
      recommendTableData: [],
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10, // 页面显示条数
        topicId: '',
        topicType: ''
      },
      recommendSearchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10, // 页面显示条数
        topicId: '',
        topicType: ''
      },
      addPraiseData: {
        isShow: false,
        likeCount: '',
        commentId: ''
      },
      addCommentData: {
        isShow: false,
        commentId: ''
      }
    }
  },
  mounted() {
    this.init()
  },
  // 路由离开时清空用户信息
  beforeRouteLeave(to, from, next) {
    if (to) {
      this.$destroy()
    }
    next()
  },
  methods: {
    refresh() {
      this.searchList()
      this.getRecommendList()
    },
    /* 进入页面执行的方法 */
    init() {
      this.searchParams.topicId = this.$route.query.id
      this.searchParams.topicType = this.$route.query.topicType
      this.searchParams.pageNum = 1
      this.recommendSearchParams.topicId = this.$route.query.id
      this.recommendSearchParams.topicType = this.$route.query.topicType
      this.recommendSearchParams.pageNum = 1
      this.searchList()
      this.getRecommendList()
    },
    /* 获取列表 */
    async searchList() {
      this.loading = true
      let params = this.searchParams
      let response = await getBase(params)
      this.loading = false
      this.tableData = response.rows
      this.total = response.total
    },
    // 获取推荐评论列表
    async getRecommendList() {
      this.loading = true
      let params = this.recommendSearchParams
      let response = await getRecommend(params)
      this.loading = false
      this.recommendTableData = response.rows
      this.recommendTotal = response.rows.length
    },
    /* 过滤返回评论内容 */
    filterContent(item) {
      return filterCon(item)
    },
    // 添加回复
    addComment(commentId) {
      this.addCommentData.isShow = true
      this.addCommentData.commentId = commentId
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    // 推荐评论换页
    recommendChangePage(page) {
      this.recommendSearchParams.pageNum = page
      this.getRecommendList()
    },
    /* 后退 */
    cancel() {
      this.$router.go(-1)
    },
    /* 跳转页面 */
    changeView(name, id) {
      let query = {
        id,
        topicId: this.searchParams.topicId,
        topicType: this.searchParams.topicType
      }
      this.$router.push({
        name,
        query
      })
    },
    // 加赞按钮
    showAddPraise(commentId, likeCount) {
      this.addPraiseData.isShow = true
      this.addPraiseData.commentId = commentId
      this.addPraiseData.likeCount = likeCount
    },
    // 置顶评论
    toRecommend(commentId) {
      this.$confirm('确认要置顶该评论吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let res = await recommend(commentId)
          if (res) {
            this.searchList()
            this.getRecommendList()
          }
        })
        .catch(() => {})
    },
    // 取消置顶
    cancelRecommend(commentId) {
      this.$confirm('确认要取消该置顶吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let res = await cRecommend(commentId)
          if (res) {
            this.searchList()
            this.getRecommendList()
          }
        })
        .catch(() => {})
    }
  },
  watch: {
    // $route.path改变时，mounted()不执行,通过监听$route.path，执行进入页面方法
    '$route.path': 'init'
  },
  components: {
    dialogReply,
    dialogAddPraise
  }
}
</script>

<style lang="less">
#jobCommentList {
  @import url('~@common/style/imgBox.less');
  .con-right-title {
    i {
      cursor: pointer;
    }
  }
  .avatar-box {
    width: 40px;
    height: 40px;

    .el-image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .recommend-pagination {
    margin-bottom: 20px;
  }
}
</style>
